<template>
  <div class="login">
    <span style="color:#00fffb;font-size: xx-large">您的密码已超过90天未更改，请修改密码</span>
    <div class="login_bock">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="0px"
        class="demo-ruleForm"
        :size="formSize"
      >
        <el-form-item prop="oldPass">
          <el-input
            v-model="ruleForm.oldPass"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入旧密码"
            size="large"
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            v-model="ruleForm.pass"
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
            size="large"
            autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
              v-model="ruleForm.confirmPassword"
              :prefix-icon="Lock"
              type="password"
              placeholder="请重复输入新密码"
              size="large"
              autocomplete="new-password"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="large"
            style="width: 100%"
            @click="submitForm(ruleFormRef)"
          >
            修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { Lock, User } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
const store = useStore()

interface RuleForm {
  oldPass: string
  pass: string
  confirmPassword: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  oldPass: '',
  pass: '',
  confirmPassword: ''
})

//正则校验主要是这部分：/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$
//其中特殊字符包括：._~!@#$^&*  （比较常见）
let newValValidate = (rule, value, callback) => {
  if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[._~!@#$^&*])[A-Za-z0-9._~!@#$^&*]{8,16}$/g.test(value)) {
    callback()
  } else {
    callback(new Error('请输入包含英文字母大小写、数字和特殊符号的 8-16 位组合'))
  }
}

const equalToPassword = (rule, value, callback) => {
  if (ruleForm.pass !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<RuleForm>>({
  oldPass: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
  pass: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    {
      min: 8,
      max: 16,
      message: '长度应在 8 到 16 个字符',
      trigger: 'blur'
    },
    { validator: newValValidate, trigger: 'blur' }
  ],
  confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.dispatch('login/updatePwdForMy', ruleForm)
    }
  })
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
:deep(.el-input__inner),
:deep(.el-button--large) {
  height: 70px;
}
:deep(.el-input .el-input__icon) {
  font-size: 24px;
}
:deep(.el-checkbox) {
  height: 25px;
}
:deep(.el-checkbox__label),
:deep(.el-input__inner),
:deep(.el-form-item__error) {
  font-size: 18px;
}
:deep(.el-button--large) {
  font-size: 27px;
}
:deep(.el-form-item--default) {
  margin-bottom: 30px;
}
:deep(.el-checkbox__inner) {
  width: 20px;
  height: 20px;
}
:deep(.el-checkbox__inner::after) {
  // width: 20px;
  height: 15px;
  left: 6px;
}

.login_code {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    height: 68px;
    margin-left: 25px;
  }
}
.login {
  height: 100vh;
  background: url('@/assets/images/login/login_bj.png') no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & > img {
    width: 1021px;
    margin-bottom: 53px;
  }

  .login_bock {
    height: 568px;
    width: 704px;
    text-align: center;
    background: url('@/assets/images/login/login_bock.png') no-repeat;
    background-size: 100% 100%;
    padding: 63px 110px;
  }
}
</style>